/*
 * @description: 使用教程弹窗
 * @Author: along
 * @Date: 2021-03-15
 * @Last Modified by: along
 * @Last Modified time: --
 */
<template>
    <el-dialog
        :visible.sync="showDialog"
        width="640px"
        title="寝室推广任务规则"
        :show-close="true"
        class="useProcess"
    >
        <div class="_wrap">
            <p class="_wrap_title">
                寝室推广任务规则
            </p>
            <div class="_items">
                <p class="_items_title">
                    一、基本要求
                </p>
                <p class="_items_content">
                    标准1：商家商品礼品发放体现在视频内，视频清晰展示商品；
                </p>
                <p class="_items_content">
                    标准2：传单发放体现在视频内，并介绍传单作用；
                </p>
                <p class="_items_content">
                    标准3：视频中听讲人数2人及以上，必须保持在听讲状态；
                </p>
                <p class="_items_content">
                    标准4：按提供话术完成商品介绍、话术流利、感情饱满；
                </p>
                <p class="_items_content">
                    标准5：介绍时需将商品给到学生手中或摆放在其面前；
                </p>
                <p class="_items_content">
                    标准6：视频清晰、语音清晰，拍摄地点必须在寝室内；
                </p>
                <p class="_items_content">
                    标准7：不弄虚做假，反馈真实的推广情况。
                </p>
            </div>
            <div class="_items">
                <p class="_items_title">
                    二、奖励机制
                </p>
            </div>
            <div class="_items m14">
                <p class="_items_title b10">
                    1、视频质量奖金
                </p>
                <p class="_items_content">
                    &nbsp;&nbsp;（1）产品介绍语速较快，话术卡壳，整体感观较差：低于预期：1分
                </p>
                <p class="_items_content">
                    &nbsp;&nbsp;（2）机器人声产品介绍，语气生硬冰冷，感官一般：符合预期：2分
                </p>
                <p class="_items_content">
                    &nbsp;&nbsp;（3）产品介绍生动流利，有基础交流，感官较好：超预期：3分
                </p>
                <p class="_items_content">
                    &nbsp;&nbsp;（4）产品介绍生动流利有感情且互动性多，整体感观非常好：远超预期：5分
                </p>
            </div>
            <!-- <div class="_items m14">
                <p class="_items_title b10">
                    2、社群邀新奖金
                </p>
                <p class="_items_content">
                    一期社群粉丝新增≥20个：低于预期：1分
                </p>
                <p class="_items_content">
                    一期社群粉丝新增≥40个：符合预期：2分
                </p>
                <p class="_items_content">
                    一期社群粉丝新增≥60个：超预期：3分
                </p>
                <p class="_items_content">
                    一期社群粉丝新增≥100个：远超预期：5分
                </p>
            </div>
            <div class="_items m14">
                <p class="_items_title b10">
                    3、APP邀新奖金
                </p>
                <p class="_items_content">
                    一期APP粉丝新增≤20个：低于预期：1分
                </p>
                <p class="_items_content">
                    一期APP粉丝新增≥40个：符合预期：2分
                </p>
                <p class="_items_content">
                    一期APP粉丝新增≥60个：超预期：3分
                </p>
                <p class="_items_content">
                    一期APP粉丝新增≥100个：远超预期：5分
                </p>
            </div>
            <div class="_items m14">
                <p class="_items_title b10">
                    4、一卡通销售奖金
                </p>
                <p class="_items_content">
                    一期一卡通销售≥50张：低于预期：1分
                </p>
                <p class="_items_content">
                    一期一卡通销售≥100张：符合预期：2分
                </p>
                <p class="_items_content">
                    一期一卡通销售≥150张：超预期：3分
                </p>
                <p class="_items_content">
                    一期一卡通销售≥200张：远超预期：5分
                </p>
            </div> -->
            <div class="_items">
                <p class="_items_title">
                    三、惩罚机制
                </p>
                <p class="_items_content">
                    1、视频重复率、不合格率≥10%，补齐不合格视频数量，薪酬分两部分结算，第二部分和第一部分间隔14天。
                </p>
                <p class="_items_content">
                    2、视频重复率、不合格率≥20%，补齐不合格视频数量，按合格视频80%结算薪酬，薪酬分两部分结算，第二部分和第一部分间隔10天。
                </p>
                <p class="_items_content">
                    3、视频重复率、不合格率≥30%，补齐不合格视频，按合格视频60%结算薪酬，薪酬分两部分结算，第二部分和第一部分间隔20天，精英列入执行黑名单。
                </p>
            </div>
        </div>
        <div
            class="_foot"
            @click="showDialog = false"
        >
            知道了
        </div>
    </el-dialog>
</template>

<script>
export default {
    data () {
        return {
            showDialog: false
        };
    },
    mounted () {

    },
    methods: {
        show () {
            this.showDialog = true;
        },
        close () {
            this.showDialog = false;
        }
    }
};
</script>

<style lang="less" scoped>
.useProcess {
    ._wrap {
        // width: 536px;
        max-height: 530px;
        overflow: hidden;
        overflow-y: auto;
        box-sizing: border-box;
        padding: 0 52px 30px 52px;
        &::-webkit-scrollbar {
            width: 3px;
        }
        ._wrap_title {
            color: rgba(51, 51, 51, 1);
            font-size: 16px;
            font-weight: 500;
        }
        ._items {
            width: 100%;
            display: flex;
            flex-direction: column;
            margin-top: 24px;
            ._items_title {
                color: rgba(51, 51, 51, 1);
                font-size: 14px;
                font-weight: 500;
                line-height: 24px;
            }
            ._items_content {
                color: rgba(102, 102, 102, 1);
                font-size: 14px;
                line-height: 24px;
            }
            .b10 {
                margin-bottom: 10px;
            }
        }
        .m14 {
            margin-top: 14px;
        }
    }
    ._foot {
        width: 100%;
        height: 52px;
        text-align: center;
        line-height: 52px;
        color: rgba(32, 160, 255, 1);
        font-size: 16px;
        cursor: pointer;
        border-top: 1px rgba(233, 233, 233, 1) solid;
    }
}
</style>
<style lang="less">
.useProcess {
    .el-dialog__header {
        padding-top: 10px;
        box-shadow:0px 1px 0px 0px rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    .el-dialog__body {
        padding-left: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
    }
}
</style>